<template>
    <div class="conference-info-container">
        <h2>会议详情</h2>
        <div class="item-container">
            <div class="item">
                <p class="title">会议主题</p>
                <p class="desc">{{ conferenceInfo.conferenceTitle }}</p>
            </div>
            <div class="item">
                <p class="title">发起人</p>
                <p class="desc">{{ ownerName }}</p>
            </div>
            <div class="item">
                <p class="title">会议号</p>
                <p class="desc">{{ conferenceInfo.conferenceId }}</p>
            </div>
            <div class="item">
                <p class="title">二维码</p>
                <i>&gt;</i>
            </div>
        </div>
        <div class="item-container">
            <div class="item">
                <p class="title">开始时间</p>
                <p class="desc">{{ startTime }}</p>
            </div>
            <div class="item">
                <p class="title">结束时间</p>
                <p class="desc">{{ endTime }}</p>
            </div>
        </div>
        <div class="item-container">
            <div class="item">
                <label>
                    开启视频
                    <input :disabled="audience" v-model="enableVideo" type="checkbox">
                </label>
            </div>
            <div class="item">
                <label>
                    开启音频
                    <input :disabled="audience" v-model="enableAudio" type="checkbox">
                </label>
            </div>
        </div>

        <div class="action-container">
            <button class="destroy" v-if="enableDestroy">
                销毁会议
            </button>
            <button ref="favButton" v-if="new Date().getTime() < conferenceInfo.startTime * 1000" @click="favConference">
                尚未开始，收藏会议
            </button>
            <button v-else-if="new Date().getTime() < conferenceInfo.endTime * 1000" @click="joinConference">
                加入会议
            </button>
            <button v-else :disabled="true">
                会议已结束
            </button>
        </div>
    </div>
</template>

<script>
import wfc from "../../../wfc/client/wfc";
import avenginekitproxy from "../../../wfc/av/engine/avenginekitproxy";
import conferenceApi from "../../../api/conferenceApi";
import conferenceManager from "./conferenceManager";

export default {
    name: "ConferenceInfoView",
    props: {
        conferenceInfo: {
            type: Object,
            required: true,
        }
    },
    data() {
        return {
            enableVideo: false,
            enableAudio: false,
            ownerName: '',
        }
    },
    mounted() {
        console.log('conferenceInfo', this.conferenceInfo);
        this.ownerName = wfc.getUserDisplayName(this.conferenceInfo.owner);
    },
    methods: {
        favConference() {
            conferenceApi.favConference(this.conferenceInfo.conferenceId)
                .then(r => {
                    this.$refs.favButton.title = '已收藏';
                    this.$refs.favButton.disabled = true;
                })
                .catch(err => {
                    console.error('favConference error', err);
                })
        },
        joinConference() {
            let info = this.conferenceInfo;
            console.log('joinConference', info);
            let audience = !this.enableVideo && !this.enableAudio
            avenginekitproxy.joinConference(info.conferenceId, false, info.pin, info.owner, info.conferenceTitle, '', audience, info.advance, !this.enableAudio, !this.enableVideo);
            this.$modal.hide('conference-info-modal');
        },
    },
    computed: {
        startTime() {
            let date = new Date(this.conferenceInfo.startTime * 1000);
            return date.toString();
        },
        endTime() {
            if (!this.conferenceInfo.endTime) {
                return '-'
            }

            let date = new Date(this.conferenceInfo.endTime * 1000)
            return date.toString();
        },
        audience() {
            return !(this.conferenceInfo.owner === conferenceManager.selfUserId || !this.conferenceInfo.audience || this.conferenceInfo.allowSwitchMode)
                // Safari 浏览器，不支持直接静音自动播放音视频
                || navigator.vendor.indexOf('Apple') > 0
        },
        enableDestroy() {
            return this.conferenceInfo.owner === conferenceManager.selfUserId && new Date().getTime() < this.conferenceInfo.startTime * 1000;
        }
    }
}
</script>

<style scoped>

.conference-info-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f8f8f8;
}

.conference-info-container h2 {
    justify-content: center;
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    background: white;
    text-align: center;
    padding: 20px 0;
}

.item-container {
    background: white;
    margin-bottom: 20px;
    font-size: 14px;
}

.item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 12px 20px;
    border-spacing: 20px;
}


/*.item:active {*/
/*    background: #d6d6d6;*/
/*}*/

.item:not(:last-of-type) {
    border-bottom: 1px solid #f1f1f1;
}

.item .desc {
    color: gray;
}

.item label {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.action-container {
    display: flex;
    margin: 0 10px;
}

button {
    background: white;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    height: 40px;
    line-height: 40px;
    border: none;
}

button:active {
    background: lightgrey;
}

button.destroy {
    margin-right: 10px;
    color: red;
}

</style>
